﻿@page "/components/label"

<PageOutlet Url="components/label"
            Title="Label"
            Description="label component of the bit BlazorUI components" />

<DemoPage Name="Label"
          Description="Labels give a name or title to a control or group of controls, including text fields, check boxes, combo boxes, radio buttons, and drop-down menus."
          Parameters="componentParameters"
          GitHubUrl="Utilities/Label/BitLabel.razor"
          GitHubDemoUrl="Utilities/Label/BitLabelDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <div>
            <BitLabel>I'm a Label</BitLabel>
            <br />
            <BitLabel IsEnabled="false">I'm a disabled Label</BitLabel>
        </div>
    </DemoExample>

    <DemoExample Title="Visibility" RazorCode="@example2RazorCode" Id="example2">
        <div>
            <div style="display:flex;align-items:center;">Visible: [ <BitLabel Visibility="BitVisibility.Visible">Visible Label</BitLabel> ]</div>
            <br />
            <div style="display:flex;align-items:center;">Hidden: [ <BitLabel Visibility="BitVisibility.Hidden">Hidden Label</BitLabel> ]</div>
            <br />
            <div style="display:flex;align-items:center;">Collapsed: [ <BitLabel Visibility="BitVisibility.Collapsed">Collapsed Label</BitLabel> ]</div>
        </div>
    </DemoExample>

    <DemoExample Title="Style and Class" RazorCode="@example3RazorCode" Id="example3">
        <div>
            <BitLabel Style="color: dodgerblue; font-weight:bold">I'm a Label with Style</BitLabel>
            <br />
            <BitLabel Class="custom-class">I'm a Label with Class</BitLabel>
        </div>
    </DemoExample>

    <DemoExample Title="Required" RazorCode="@example4RazorCode" Id="example4">
        <div>
            <BitLabel Required>I'm a required Label</BitLabel>
        </div>
    </DemoExample>

    <DemoExample Title="For" RazorCode="@example5RazorCode" Id="example5">
        <div>
            <BitLabel For="label-input">A Label for An Input</BitLabel>
            <br />
            <input type="text" name="label-input" id="label-input" />
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example6RazorCode" Id="example6">
        <div>
            <BitLabel Dir="BitDir.Rtl">من یک برچسب هستم</BitLabel>
        </div>
    </DemoExample>
</DemoPage>